<template> 
    <div class="detailBottom">
        <flexbox :gutter="0">
            <flexbox-item :span="1/6" >
                <div class="bottom-back bottom-common"  @click="showSide">
                    <div>
                        <svg class="icon cell_icon" aria-hidden="true" style="width:.6rem;height:.6rem;margin-top:.18rem;">
                            <use xlink:href="#icon-mulu"></use>
                        </svg>
                    </div>
                </div>
            </flexbox-item>
            
            <flexbox-item :span="1/4"><router-link to="/consult" tag='div' class="bottom-consult bottom-common">交友</router-link> </flexbox-item>
            <flexbox-item :span="1/4"><div class="bottom-apply bottom-common">活动</div></flexbox-item>
            <flexbox-item :span="1/6">
                <div class="bottom-share bottom-common" style="border-right: 1px solid #e8e8e8">
                    <div>
                        <svg class="icon cell_icon" aria-hidden="true" style="width:.6rem;height:.6rem;margin-top:0.06rem;">
                            <use xlink:href="#icon-xin-"></use>
                        </svg>
                        <span class="bottom-back__sharetips">心动</span>
                    </div>
                </div>
            </flexbox-item>
            <flexbox-item :span="1/6">
                <div class="bottom-share bottom-common">
                    <div>
                        <svg class="icon cell_icon" aria-hidden="true" style="width:.55rem;height:.55rem;margin-top:0.06rem">
                            <use xlink:href="#icon-xinxi"></use>
                        </svg>
                        <span class="bottom-back__sharetips">私信</span>
                    </div>
                </div>
            </flexbox-item>
        </flexbox>
    </div>
</template>

<script>
import { Flexbox, FlexboxItem  } from 'vux'
export default {
    name: "HomeBottom",
    components: {
        Flexbox,
        FlexboxItem,
    },
    methods: {
        showSide: function () {
            
            this.$emit('showSide')
        }
    }
}
</script>

<style lang="stylus" scoped>
.detailBottom
    position: fixed
    bottom: 0
    left: 0
    right: 0
    background-color: #fff
    box-shadow: 0 0 1px 1px  #e8e8e8
    .bottom-common
        text-align: center
        height: 1rem
    .bottom-back
        border-right: 1px solid #e8e8e8
        color: #c4c4c4
        position: relative
        .bottom-back__tips
            position: absolute 
            bottom: .10rem
            width: 100%
            left: 0
    .bottom-share
        color: #c4c4c4
        position: relative
        &:after
            content: ''
            position: absolute
            right: .2rem
            top: .1rem
            width: 0.16rem
            height: 0.16rem
            border-radius: 50%
            background-color: red

        .bottom-back__sharetips
            position: absolute 
            bottom: .10rem
            width: 100%
            left: 0
            font-size: 0.12rem
    .bottom-consult
        line-height: 1rem
        color: #fff
        background-color: #00a701
        
    .bottom-apply
        line-height: 1rem
        color: #fff
        background-color: #ff7010
</style>